<template>
  <div class="w-100">
    <el-table class="mb-3" :data="tabList" style="width: 100%" border stripe size="mini" :show-summary="summary" :header-cell-style="{ background: '#e9ecf4', color: '#606266' }">
      <template v-for="(item, index) in tableHead">
        <el-table-column v-if="item.label === '序号'" :key="index" align="center" :width="item.width" :label="item.label">
          <template slot-scope="scope">
            <span v-if="isSummary === ''">{{ scope.$index + 1 }}</span>
            <span v-else>{{ scope.$index + 1 === tabList.length ? '合计' : scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === '自定义'" :key="index" align="center" :width="item.width" :label="item.label">
          <template slot-scope="scope">
            <slot name="area" :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === '自定义1'" :key="index" align="center" :width="item.width" :label="item.label">
          <template slot-scope="scope">
            <slot name="zhucunnengli" :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column v-else :key="index" align="center" :width="item.width" :prop="item.key" :label="item.label" />
      </template>
      <el-table-column v-if="!look && hanlder" label="操作" align="center">
        <template slot-scope="scope">
          <slot v-if="hanlderSlot" name="hanlder" :row="scope.row" />
          <div v-else>
            <template v-if="scope.$index + 1 === tabList.length && isSummary !== ''" />
            <template v-else>
              <el-link class="mr-2" type="warning" :underline="false" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
              <el-link type="danger" :underline="false" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    look: {
      type: Boolean,
      default: true
    },
    hanlder: {
      type: Boolean,
      default: true
    },
    hanlderSlot: {
      type: Boolean,
      default: false
    },
    summary: {
      type: Boolean,
      default: false
    },
    tabList: {
      type: Array,
      default: () => []
    },
    tableHead: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: true
    },
    isSummary: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleEdit(index, row) {
      this.$emit('edit', { index, row })
    },
    handleDelete(index, row) {
      this.$emit('delete', { index, row })
    }
  }
}
</script>

<style lang="scss" scoped></style>
